<template>
	<view class="doc">
		<!-- 医生详情 -->
		<view class="docinfo">
			<view class="info">
				<view class="infol">
					<view class="docimg">

					</view>
					<view class="doctit">
						<view class="docname">
							张三丰  <span>主任医师</span>
						</view>
						
					</view>
				</view>
				<view class="infor">
					<view class="inforitemr">
						<!-- <u-icon name="heart" size="28"></u-icon> -->
						+ 关注
					</view>
					<view class="inforiteml">
						<view class="inforitemll">
							<u-icon  name="share-square" size="20" color="#ffffff"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="dochos">
				郑州大学第一附属医院 <view class="hostype">
					三甲
				</view>
			</view>
			<view class="doctaglist">
				<view class="doctag">
					河南百佳名医（2023） No。1
				</view>
				<view class="doctag1">
					国医妙手
				</view>
			</view>
			<view class="docnum">
				<view class="docnumitem">
					评价 <span>9.分</span>
				</view>
				<view class="docnumitem" style="text-align: center;">
					预约 <span>888</span>
				</view>
				<view class="docnumitem" style="text-align: right;">
					关注 <span>888</span>
				</view>
			</view>
			<view class="goodat">
				 <view class="ginfo" >
					擅长：{{goodat}}
				</view>
			



				<view class="lijie" @click="opengood()">
					了解医生>
				</view>
			</view>
		</view>
		<!-- 号源 -->
		<view class="hoslist" v-for="item in hoslist">
			<view class="hosmain">
				<view class="hositem">
					<view class="hostop">
						<view class="hostopl">
							<view class="hosnum" :style="{background:item.color}">
								{{item.num}}
							</view>
							<view class="hositenname">
								{{item.title}} <span>主页></span>
							</view>

						</view>
						<view class="hostopr" @click="zhankai(item)">
							<view class="you">
								有号
							</view>
							<view class=""  v-if="item.show==false">
								<u-icon name="arrow-down"></u-icon>
							</view>
							<view class="" v-if="item.show==true">
								<u-icon name="arrow-up"></u-icon>
							</view>
						</view>
					</view>
					<view class="" v-if="hosid==item.id">
						<view class="hosdep">
							<view class="depitem" v-for="itdep in item.deplist" :class="{ activedep: activedep == itdep.id}" @click="choosedep(itdep)">
								{{itdep.depname}}
								<view class="dian" v-if="activedep == itdep.id"> 
									.
								</view>
							</view>
					
						</view>
						<view class="allhao">
							  <u-radio-group
							    v-model="allhao"
							    placement="column"
							 
							  >
							    <u-radio
							      :customStyle="{marginBottom: '8px'}"
							      v-for="(item, index) in radiolist1"
							      :key="index"
							      :label="item.name"
							      :name="item.name"
							      @change="radioChange"
							    >
							    </u-radio>
							  </u-radio-group>
						</view>
						<view class="haoyuan">
							<view class="haoyuanl">
								<view class="">
									上午
								</view>
								<view class="">
									下午
								</view>
							</view>
							<view class="haoyuanr">
								<ul>
									<li v-for="itam in item.hao">
										<view class="datetop">
											<p>{{itam.week}}</p>
											<p>{{itam.date}}</p>
										</view>
										<view class="haoitem" v-if="itam.shang=='0'">

										</view>
										<view class="haoitem" style="background-color: #4581f7;" @click="gethao()"
											v-if="itam.shang=='1'">
											预约
										</view>
										<view class="haoitem" style="background-color: red;" @click="gethao()"
											v-if="itam.shang=='2'">
											约满
										</view>
										<view class="haoitem" style="background-color: orange;" @click="gethao()"
											v-if="itam.shang=='3'">
											停诊
										</view>
										<view class="haoitem" v-if="itam.xia=='0'">

										</view>
										<view class="haoitem" style="background-color: #4581f7;" @click="gethao()"
											v-if="itam.xia=='1'">
											预约
										</view>
										<view class="haoitem" style="background-color: red;" @click="gethao()"
											v-if="itam.xia=='2'">
											约满
										</view>
										<view class="haoitem" style="background-color: orange;" @click="gethao()"
											v-if="itam.xia=='3'">
											停诊
										</view>
									</li>

								</ul>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<!-- 评价 -->
		<view class="comment">
			<view class="commore">
				<view class="commoremain">
					<view class="commorel">
						患者评价 <span>(28)</span>
					</view>
					<view class="commorer" @click="goallping()">
						查看全部>
					</view>
				</view>
			</view>
			<view class="commenlist">
				<view class="commenitem" v-for="item in pinglist">
					<view class="comhos">
						<view class="comhosmain">
							<view class="zhi" style="display: flex;">
								<u-icon name="map-fill"></u-icon><span style="margin-left: 10rpx;">执业地点</span>
							</view>
							<view class="zhiinfo">
								呼吸门诊 {{item.hosname}}
							</view>
						</view>
					</view>
					<view class="comall">
						<view class="comtop">
							<view class="comtopl">
								{{item.name}} <span>{{item.disease}}</span>
							</view>
							<view class="comtopr">
							<u-rate :count="count" v-model="value"  active-color="orange"></u-rate>
							</view>
						</view>
						<view class="cominfo" v-if="item.showText">
							{{item.content}}

						</view>
						<view class="cominfo" v-if="!item.showText">
							{{item.content.substr(0, 60)}}...

						</view>
						<view class="" v-if="item.showText">
							<text v-if="item.content !== null && item.content.length > 60" class="full_text"
								@click="toggleDescription(item)">收起</text>
						</view>
						<view class="" v-if="!item.showText">
							<text v-if="item.content !== null && item.content.length > 60" class="full_text"
								@click="toggleDescription(item)">查看全部></text>
						</view>
						<view class="combot">
							<view class="cbotl">
								<view class="cbotli">
									<image mode="aspectFit" src="../../static/icons/chakan.png"></image>
									<span style="margin-left: 10rpx;">110</span>
								</view>
								<view class="cbotli" @click="dian(item)">
									<image v-if="item.dianshow==false" mode="aspectFit" src="../../static/icons/dz.png">
									</image>
									<image v-if="item.dianshow==true" mode="aspectFit" src="../../static/icons/dza.png">
									</image>
									<span>{{item.diannum}}</span>
								</view>
							</view>
							<view class="cbotr">
								2023-07-01
							</view>
						</view>
					</view>
				</view>

			</view>

		</view>
		<u-popup :show="showdocinfo" @close="closegood()" mode="bottom" :round="10" :closeable="true">
			<scroll-view :scroll-into-view="toView" scroll-y="true" style="height: 800rpx;"
				scroll-with-animation="true">
				<view class="popgood">
					<view class="pptit">
						朱一龙医生基本信息
					</view>
					<view class="popgtit">
						（1）医生简介
					</view>
					<view class="popinfo">
						这是一个医生简介这是一个医生简介这是一个医生简介这是一个医生简介这是一个医生简介这是一个医生简介这是一个医生简介这是一个医生简介这是一个医生简介这是一个医生简介这是一个医生简介这是一个医生简介

					</view>
					<view class="popgtit">
						（1）医生擅长
					</view>
					<view class="popinfo">
						这是一个医生简介这是一个医生简介这是一个医生简介这是一个医生简介这是一个医生简介这是一个医生简介这是一个医生简介这是一个医生简介这是一个医生简介这是一个医生简介这是一个医生简介这是一个医生简介
					</view>
				</view>
			</scroll-view>
		</u-popup>
		<u-popup :show="showhaoyuan" @close="closehaoyuan()" mode="bottom" :round="10" :closeable="true">
			<scroll-view :scroll-into-view="toView" scroll-y="true" style="height: 800rpx;"
				scroll-with-animation="true">
				<view class="pophaoyuan">
					<view class="haoinfo">
						<view class="haotit">
							06-07 周三 上午 诊疗费 <span>4.5元</span>
						</view>
						<view class="haoi">
							郑州大学第一附属医院 呼吸门诊
						</view>
					</view>
					<view class="haolist">
						<view class="haoitemm" @click="choosehao(item)" :class="{ active: active == item.id}" v-for="item in haolist">
							<p>{{item.timerange}}</p>
							<p>余<span>{{item.num}}</span></p>
						</view>
						
					</view>
					<view class="confirm" @click="confirmorder()">
						确定
					</view>
				</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	import parse from 'mini-html-parser2'
	export default {
		data() {
			return {
				count: 5,
								value: 4,
			  radiolist1: [{
			            name: '所有号源',
			            disabled: false
			          }
			          ],
			          allhao: '所有号源',
				activedep:"",
				activeall: null,
				active:"",
				goodat: '',
				showhaoyuan: false,
				showdocinfo: false,
				hosid: "123",
				hoslist: [],
				pinglist: [],
				haolist: [
					{
					timerange: "08:00-08:20",
					num: "50",
					id:"1"
				},
				{
					timerange: "08:20-08:40",
					num: "50",
					id:"2"
				},
				{
					timerange: "08:40-09:00",
					num: "100",
					id:"3"
				},
				{
					timerange: "09:00-09:20",
					num: "50",
					id:"4"
				},
				{
					timerange: "09:20-09:40",
					num: "50",
					id:"5"
				},
				{
					timerange: "09:40-10:00",
					num: "50",
					id:"6"
				},
				
				]
			}
		},
		onLoad() {
			this.getlist()

		},
		methods: {
		choosedep(item){
			this.activedep=item.id
			this.allhao=""
		},
		      radioChange(n) {
		        console.log('radioChange', n);
				this.activedep=""
		      },
			confirmorder(){
				if(this.active){
					this.showhaoyuan=false
					uni.navigateTo({
						url:"/pages/confirmorder/confirmorder"
					})
				}else{
					uni.showToast({
						title:"请选择就诊时间段",
						icon:"none"
					})
				}
				
			},
			choosehao(item){
				this.active=item.id
			},
			gethao() {
				this.showhaoyuan = true
			},
			goallping() {
				uni.navigateTo({
					url: "/pages/allpingjia/allpingjia"
				})
			},

			// 评价全文展开收起
			toggleDescription(num) {
				num.showText = !num.showText
				this.$forceUpdate();
			},
			dian(item) {
				item.dianshow = !item.dianshow
				if (item.dianshow == true) {
					item.diannum++
				}
				if (item.dianshow == false) {
					item.diannum--
				}
			},
			getlist() {

				this.goodat =
					"山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有"

				this.pinglist = [{
						hosname: "郑州大学第一附属医院",
						disease: "呼吸道感染",
						name: "张**",
						content: "这是一条没有超出的评价",
						num: "9.9",
						dianshow: false,
						diannum: "100"
					},
					{
						hosname: "郑州大学第一附属医院",
						disease: "呼吸道感染",
						name: "李**",
						content: `这是一条超出的评价：山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
									苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
									无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`,
						num: "9.9",
						dianshow: false,
						diannum: "80"
					}
				]
				this.pinglist.forEach(al => {
					if (al.content.length > 60) {
						al.showText = false
					} else {
						al.showText = true
					}
				})

				let colorlist = ["#f4b342", "#78d089", "#53bff5"]
				this.hoslist = [{
						title: "郑州大学第一附属医院",
						show: true,
						num: "1",
						id: "123",
						deplist:[
							{depname:"第一科室",
							id:"1"},
							{depname:"第二科室",
							id:"2"}
						],
						hao: [{
								week: "今天",
								date: "06-30",
								shang: "1",
								xia: "2"
							},
							{
								week: "周六",
								date: "07-01",
								shang: "0",
								xia: "0"
							}, {
								week: "周日",
								date: "07-02",
								shang: "3",
								xia: "1"
							}, {
								week: "周一",
								date: "07-03",
								shang: "1",
								xia: "1"
							}, {
								week: "周二",
								date: "07-04",
								shang: "2",
								xia: "0"
							}, {
								week: "周三",
								date: "07-08",
								shang: "1",
								xia: "0"
							}
						]
					},
					{
						title: "郑州大学第二附属医院",
						show: false,
						num: "2",
						id: "456",
						deplist:[
							{depname:"第一科室",
							id:"1"},
							{depname:"第二科室",
							id:"2"}
						],
						hao: [{
								week: "今天",
								date: "06-30",
								shang: "1",
								xia: "0"
							},
							{
								week: "周六",
								date: "07-01",
								shang: "0",
								xia: "0"
							}, {
								week: "周日",
								date: "07-02",
								shang: "0",
								xia: "1"
							}, {
								week: "周一",
								date: "07-03",
								shang: "1",
								xia: "1"
							}, {
								week: "周二",
								date: "07-04",
								shang: "0",
								xia: "0"
							}, {
								week: "周三",
								date: "07-08",
								shang: "1",
								xia: "0"
							}
						]
					}
				]
				for (let i = 0; i < colorlist.length; i++) {
					for (let j = 0; j < this.hoslist.length; j++) {
						if (j == i) {
							this.hoslist[j].color = colorlist[i]
						}
					}
				}
				console.log(this.hoslist)

			},
			closehaoyuan() {
				this.showhaoyuan = false
				this.active=""
			},
			closegood() {
				this.showdocinfo = false
			},
			opengood() {
				this.showdocinfo = true
			},
			zhankai(item) {
				if (this.hosid) {
					if (this.hosid == item.id) {
						this.hosid = ""
						item.show = false
						console.log(this.hoslist, "1")
					} else {
						this.hoslist.forEach(el => {
							el.show = false
						})
						item.show = true
						this.hosid = item.id
						console.log(this.hoslist, "2")
					}
				} else {
					item.show = true
					this.hosid = item.id
					console.log(this.hoslist, "23")
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.doc {
		background-color:  #F5F6F8;
		padding-bottom: 100rpx;
		overflow: hidden;

		.commore {
			width: 93%;
			margin: 0 auto;
			margin-top: 20rpx;
			border-radius: 15rpx;
			background-color: #fff;
			line-height: 80rpx;

			.commoremain {
				width: 95%;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;

				.commorel {
					font-size: 34rpx;

					span {
						font-size: 24rpx;
						color: #888;
					}
				}

				.commorer {
					font-size: 24rpx
				}
			}
		}

		.commenlist {
			width: 93%;
			margin: 0 auto;
			margin-top: 20rpx;
			overflow: hidden;

			.commenitem {
				width: 100%;
				border-radius: 15rpx;
				background-color: #fff;
				margin-top: 20rpx;

				.comall {
					width: 95%;
					margin: 0 auto;
					padding-top: 20rpx;
					padding-bottom: 20rpx;

					.comtop {
						display: flex;
						justify-content: space-between;

						.comtopl {
							font-size: 26rpx;
							color: #999;

							span {
								height: 35rpx;
								font-size: 20rpx;
								display: inline-block;
								padding-left: 10rpx;
								padding-right: 10rpx;
								line-height: 35rpx;
								margin-left: 10rpx;
								background-color: #eaf3fc;
								border-radius: 5rpx;
								color: #417ef7;
							}
						}

						.comtopr {
							color: #ea661f;
							font-size: 28rpx;
						}
					}

					.cominfo {
						font-size: 24rpx;
						line-height: 35rpx;
						color: #333;
						margin-top: 10rpx;
						// height: 70rpx;
						// letter-spacing: 1rpx;
						// display: -webkit-box;
						// overflow: hidden;
						// text-overflow: ellipsis;
						// word-wrap: break-word;
						// white-space: normal !important;
						// -webkit-line-clamp: 2;
						// -webkit-box-orient: vertical;
					}

					.full_text {
						font-size: 24rpx;
						color: #417ef7;
						line-height: 50rpx;
					}

					.combot {
						display: flex;
						justify-content: space-between;
						margin-top: 10rpx;

						.cbotr {
							font-size: 20rpx;
							color: #888;
						}

						.cbotl {
							display: flex;

							.cbotli {
								display: flex;
								font-size: 20rpx;
								color: #888;
								margin-right: 20rpx;

								image {
									width: 30rpx;
									height: 20rpx;
								}

								span {
									line-height: 20rpx;
								}
							}
						}
					}
				}

				.comhos {
					width: 100%;
					background-color: #efefef;
					border-radius: 15rpx 15rpx 0 0;

					.comhosmain {
						width: 95%;
						margin: 0 auto;
						padding-top: 20rpx;
						padding-bottom: 20rpx;

						.zhi {
							font-size: 28rpx;
						}

						.zhiinfo {
							font-size: 22rpx;
							color: #666;
							line-height: 40rpx;
						}
					}
				}
			}
		}

		.pophaoyuan {
			overflow: hidden;
			width: 95%;
			margin: 0 auto;
			margin-top: 20rpx;
			padding-bottom: 100rpx;
			position: relative;

			.haoinfo {
				margin-top: 20rpx;

				.haotit {
					font-size: 28rpx;
					line-height: 35rpx;

					span {
						color: orange;
						margin-left: 10rpx;
					}
				}

				.haoi {
					font-size: 24rpx;
					line-height: 35rpx;
				}
			}

			.confirm {
				position: fixed;
				width: 90%;
				left: 5%;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 50rpx;
				font-size: 32rpx;
				bottom: 50rpx;
				color: #fff;
				background-color: #417ef7;
				text-align: center;
			}

			.haolist {
				display: flex;
				flex-wrap: wrap;
				margin-top: 20rpx;

				.haoitemm {
					width: 216rpx;
					height: 90rpx;
					line-height: 45rpx;
					font-size: 24rpx;
					text-align: center;
					margin: 8rpx;
					border-radius: 10rpx;
					border: 1rpx solid #ccc;

					span {
						color: #417ef7;
					}
				}
				.active{
					border: 1rpx solid  #417ef7;
					background-color: #f5f8ff;
				}
			}
		}

		.popgood {
			overflow: hidden;
			width: 95%;
			margin: 0 auto;
			margin-top: 20rpx;
			padding-bottom: 100rpx;

			.pptit {
				font-size: 35rpx;
				line-height: 50rpx;
				font-weight: bold;
				margin-top: 20rpx;
			}

			.popgtit {
				font-size: 30rpx;
				line-height: 50rpx;
				font-weight: bold;
				margin-top: 20rpx;

			}

			.popinfo {
				margin-top: 20rpx;
				font-size: 28rpx;
				line-height: 35rpx;
			}
		}

		.hoslist {
			width: 93%;
			margin: 0 auto;
			margin-top: 20rpx;
			border-radius: 15rpx;
			background-color: #fff;
			padding-top: 20rpx;
			padding-bottom: 20rpx;

			.hosmain {
				width: 95%;
				margin: 0 auto;

				.haoyuan {
					display: flex;
					padding-top: 10rpx;
					overflow: hidden;

					.haoyuanl {
						font-size: 28rpx;
						line-height: 100rpx;
						color: #888;
						width: 100rpx;
						margin-top: 70rpx;
					}

					.haoyuanr {
						display: flex;
						overflow: auto;
						width: 95%;
						margin: 0 auto;

						ul {
							overflow: auto;
							display: flex;
							overflow-x: auto;

							li {

								// background: #f5f5f7;
								border-radius: 10rpx;
								text-align: center;

								// margin-right: 12rpx;
								.datetop {
									width: 100rpx;
									text-align: center;
									font-size: 24rpx;
									line-height: 40rpx;

								}

								.haoitem {
									width: 95rpx;
									height: 75rpx;
									border-radius: 10rpx;
									background-color: #f6f7f9;
									margin: 5rpx;
									margin-top: 10rpx;
									line-height: 75rpx;
									color: #fff;
									font-size: 26rpx;
								}


							}
						}
					}
				}
.allhao{
	margin-top: 20rpx;
}
		
				.hosdep {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
			.depitem {
						font-size: 24rpx;
						line-height: 40rpx;
						margin-top: 20rpx;
						height: 40rpx;
						border: 1rpx solid #888;
						color: #888;
						padding-left: 15rpx;
						padding-right: 15rpx;
						background-color: #f4f7ff;
						margin-right: 20rpx;
						border-radius: 20rpx;
						position: relative;

						.dian {
							font-size: 80rpx;
							position: absolute;
							top: -50rpx;
							right: -15rpx;
							color: blue;
						}
					}
					.activedep{
						border: 1rpx solid blue;
						color: blue;
					}
				}

				.hositem {
					.hostop {
						width: 100%;
						display: flex;
						justify-content: space-between;

						.hostopl {
							display: flex;

							.hosnum {
								width: 40rpx;
								height: 40rpx;
								background-color: orange;
								border-radius: 10rpx;
								text-align: center;
								line-height: 40rpx;
								font-size: 20rpx;
								color: #fff;
							}

							.hositenname {
								font-size: 24rpx;
								line-height: 40rpx;
								margin-left: 10rpx;

								span {
									margin-left: 10rpx;
									color: #888;
								}
							}
						}

						.hostopr {
							display: flex;

							.you {
								width: 50rpx;
								font-size: 20rpx;
								height: 35rpx;
								line-height: 35rpx;
								text-align: center;
								border-radius: 5rpx;
								color: #fff;
								background-color: #57b763;
								margin-right: 5rpx;
							}
						}
					}
				}
			}
		}

		.docinfo {
			width: 93%;
			margin: 0 auto;
			margin-top: 30rpx;
			border-radius: 15rpx;
			background-color: #fff;
			padding-bottom: 15rpx;
			padding-top: 30rpx;

			.goodat {
				width: 92%;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				padding-bottom: 10rpx;
               
				.ginfo {
					width: 80%;
					font-size: 26rpx;
					height: 30rpx;
					overflow: hidden;
					color: #999;
					line-height: 30rpx;
					letter-spacing: 1rpx;
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					word-wrap: break-word;
					white-space: normal !important;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}

				.lijie {
				
					font-size: 26rpx;
					color: #333;
					height: 30rpx;
					line-height: 30rpx;
				}
			}

			.docnum {
				width: 92%;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				margin-bottom: 10rpx;
				margin-top: 20rpx;

				.docnumitem {
					width: 33.33%;
					font-size: 26rpx;
					// font-weight: bold;
					// line-height: 50rpx;

					span {
						color: orange;
						margin-left: 10rpx;
					}
				}
			}
			.dochos {
				font-size: 24rpx;
				line-height: 40rpx;
				display: flex;
				margin-left: 135rpx;
				margin-top: -35rpx;
				.hostype {
					font-size: 15rpx;
					padding-left: 6rpx;
					padding-right: 6rpx;
					line-height: 24rpx;
					margin-left: 10rpx;
					margin-top: 5rpx;
					height: 24rpx;
					color: orange;
					border: 1rpx solid orange;
					border-radius: 5rpx;
				}
			}
    .doctaglist{
		margin-left: 135rpx;
						   display: flex;
						   flex-wrap: wrap;
						   .doctag {
						   	font-size: 20rpx;
						   	color: #b58559;
						   	background-color: #fbdaa8;
						   	padding-left: 10rpx;
						   	padding-right: 10rpx;
						   	line-height: 35rpx;
							height: 35rpx;
						   	border-radius: 5rpx;
						   	margin-top: 10rpx;
							margin-right: 10rpx;
						   }
						   .doctag1 {
						   	font-size: 20rpx;
						   	color: #d87b1d;
						   	background-color: #ffd5c0;
						   	padding-left: 10rpx;
						   	padding-right: 10rpx;
						   	line-height: 35rpx;
						   	border-radius: 5rpx;
						   	margin-top: 10rpx;
						   							margin-right: 10rpx;
						   }
					   }
			.info {
				width: 92%;
				margin: 0 auto;
				display: flex;
				// padding-bottom: 20rpx;

				.infor {
					// width: 90rpx;
					// height: 45rpx;
					// font-size: 20rpx;
					// line-height: 45rpx;
					// color: blue;
					// text-align: center;
					// // background-color: #f4f7ff;
					// border-radius: 22.5rpx;
					display: flex;
					.inforitemr{
						width: 100rpx;
						height: 50rpx;
						font-size: 22rpx;
						line-height: 50rpx;
						color: blue;
						text-align: center;
						background-color: #f4f7ff;
						border-radius: 22.5rpx;
					}
					.inforiteml{
						width: 50rpx;
						height: 50rpx;
						// border: 1rpx solid #417ef7;
						background-color: #78cf88;
						text-align: center;
						line-height: 50rpx;
						margin-left: 10rpx;
						border-radius: 25rpx;
						overflow: hidden;
						.inforitemll{
							margin-left: 6rpx;
							margin-top: 6rpx;
						}
						
					}
				}

				.infol {
					display: flex;
					width: 550rpx;

					.docimg {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
						background-color: orange;
					}

					.doctit {
						margin-left: 15rpx;
                       margin-top: 5rpx; 
						.docname {
							font-size: 36rpx;
							line-height: 40rpx;
							font-weight: bold;
							span{
								font-weight: normal;
								font-size: 24rpx;
								line-height: 40rpx;
								margin-left: 10rpx;
							}
						}
					}
				}
			}
		}

	}
</style>
